import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {getRealSize} from '../utils';
import PropTypes from 'prop-types';

export default class Tag extends React.Component {
  static propTypes = {styles: PropTypes.object};
  static defaultProps = {styles: {}};
  render() {
    const {color, fill, label} = this.props;
    return (
      <View style={[Styles.container, this.props.styles]}>
        <Text style={[Styles.label, color && {color, borderColor: color}]}>
          {label}
        </Text>
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    padding: 0,
    justifyContent: 'center',
  },
  label: {
    borderColor: '#65A0F4',
    borderRadius: getRealSize(2),
    borderWidth: 1,
    paddingHorizontal: getRealSize(4),
    fontSize: getRealSize(10),
    color: '#65A0F4',
    textAlign: 'center',
  },
});
